<template>
  <div class="about">
    <at-button v-if="debug" @click="showData(chartData)">
      <i class="icon icon-align-center" /> this page data
    </at-button>
    <div id="myChart321" :style="{width: '800px', height: '550px'}"></div>
    <!-- {{years}} -->
     <input
      class="hdbtn"
      type="button"
      id="btn888"
      @click="downloadImpByChart()"
      value="保存为图片"
    />
  </div>
</template>
<style scoped>
</style>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "hello",
  data() {
    return {
      chartData: [],
      names: [],
      years:[],
      evalues: []
    };
  },
  computed: {
    ...mapState(["cookies", "debug"])
  },
  mounted() {
    this.updateCookies();
    this.chartData = this.cookies.chart32;
    this.names = this.chartData.data.names;
    this.years = this.chartData.data.years;
    this.yearsname=[];
    this.years.forEach((item, index) => {
      this.yearsname[index] = item.year;
    });
    this.drawLine();
  },
  methods: {
    ...mapMutations(["updateCookies"]),
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart321 = this.$echarts.init(
        document.getElementById("myChart321")
      );
      var option = {
        title: {
          text: this.cookies.chart32.title,
           x: "center",
          textStyle: {
            // color: "#fff",
            fontSize: "26",
            fontFamily: "FZXBSJW"
          },
        },
        //  toolbox: {
        //   feature: {
        //     saveAsImage: {
        //       type:'png'
        //     }
        //   }
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: this.yearsname,
          left:'right',
          top:'10%'
        },
        grid: {
          top:'15%',
          left: "0%",
          right: "1%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.5],
          
        },
        yAxis: {
          type: "category",
          data: this.names,
          
        },
        series: [
          {
            name: this.years[0].year,
            type: "bar",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "right",
                  textStyle: {
                    fontSize:'14',
                    // color: "Cornislk"
                  }
                }
              }
            },
             barWidth : 10,//柱图宽度
            data: this.years[0].value
          },
          {
            name: this.years[1].year,
            type: "bar",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "right",
                  textStyle: {
                    fontSize:'14',
                    // color: "Cornislk"
                  }
                }
              }
            },
             barWidth : 10,//柱图宽度
            data: this.years[1].value
          }
        ]
      };

      // 绘制图表
      myChart321.setOption(option);
    },
    showData(jsondata) {
      this.$Modal.alert({ content: jsondata });
    },
    downloadImpByChart(){
      this.common.saveChart(this.$echarts.getInstanceByDom(document.getElementById('myChart321')),this.cookies.chart32.title)
    }
  }
};
</script>
<style scoped>
.about {
 padding-top: 2rem;
}
#myChart321 {
  margin: 0 auto;
}
</style>